<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>下拉菜单 - layui</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div class="layui-btn-container" style="padding: 30px 0">
        <button class="layui-btn" id="demo1">
          按钮下拉
          <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-primary" id="demo2">
          按钮下拉
          <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
      </div>

      <div class="layui-text">
        <a href="javascript:;" id="demo3"
          >文字下拉 <i class="layui-icon layui-icon-down"></i
        ></a>
      </div>

      <div class="layui-btn-container">
        <a href="javascript:;" id="testopen"
          >testopen <i class="layui-icon layui-icon-down"></i
        ></a>
        <button class="layui-btn" lay-on="open">open</button>
        <button class="layui-btn" lay-on="close">close</button>
      </div>

      <div
        class="layui-bg-gray"
        style="margin-top: 30px; width: 100%; height: 300px; text-align: center"
        id="ID-dropdown-demo-contextmenu"
      >
        <span class="layui-font-gray" style="position: relative; top: 50%"
          >鼠标右键菜单</span
        >
      </div>
      <button class="layui-btn" style="margin-top: 15px" lay-on="contextmenu">
        开启全局右键菜单
      </button>
    </div>

    <script src="./assets/dist/layui.js"></script>
    <script>
      layui.use('dropdown', () => {
        var dropdown = layui.dropdown;
        var util = layui.util;

        dropdown.render({
          elem: '#demo1',
          shade: [0.1, '#ddd'],
          //,align: 'right'
          data: [
            {
              title: 'menu item 1',
              templet:
                '<i class="layui-icon layui-icon-light"></i> {{= d.title }} <span class="layui-badge-dot"></span>',
              id: '',
              href: '',
              type: '', //菜单类型，支持：normal/group/parent
            },
            {
              title: 'menu item <strong>2</strong>',
              templet:
                '<img src="https://unpkg.com/outeres@0.1.1/demo/avatar/0.png" style="width: 16px;"> {{- d.title }}',
              id: '',
              href: 'https://www.layui.com/',
              target: '_blank',
            },
            { type: '-' },
            {},
            {
              title: 'menu item 3 <hello>',
              id: '',
              type: 'group',
              child: [
                {
                  title: 'menu item 3-1',
                  id: '',
                },
                {
                  title: 'menu item 3-2',
                  id: '',
                  child: [
                    {
                      title: 'menu item 3-2-1',
                      id: '',
                    },
                    {
                      title: 'menu item 3-2-2',
                      id: '',
                      type: 'group',
                      child: [
                        {
                          title: 'menu item 3-2-2-1',
                          id: '',
                        },
                        {
                          title: 'menu item 3-2-2-2',
                          id: '',
                        },
                      ],
                    },
                    {
                      title: 'menu item 3-2-3',
                      id: '',
                    },
                  ],
                },
                {
                  title: 'menu item 3-3',
                  id: '',
                  type: 'group',
                  child: [
                    {
                      title: 'menu item 3-3-1',
                      id: '',
                    },
                    {
                      title: 'menu item 3-3-2',
                      id: '',
                      child: [
                        {
                          title: 'menu item 3-3-2-1',
                          id: '',
                        },
                        {
                          title: 'menu item 3-3-2-2',
                          id: '',
                        },
                        {
                          title: 'menu item 3-3-2-3',
                          id: '',
                        },
                      ],
                    },
                    {
                      title: 'menu item 3-3-3',
                      id: '',
                    },
                  ],
                },
              ],
            },
            { type: '-' },
            {
              title: 'menu item 4',
              id: '',
            },
            {
              title: 'menu item 5',
              id: '',
              child: [
                {
                  title: 'menu item 5-1',
                  id: '',
                  child: [
                    {
                      title: 'menu item 5-1-1',
                      id: '',
                    },
                    {
                      title: 'menu item 5-1-2',
                      id: '',
                    },
                    {
                      title: 'menu item 5-1-3',
                      id: '',
                    },
                  ],
                },
                {
                  title: 'menu item 5-2',
                  id: '',
                },
                {
                  title: 'menu item 5-3',
                  id: '',
                },
              ],
            },
            { type: '-' },
            {
              title: 'menu item 6',
              id: '',
              type: 'group',
              isSpreadItem: false,
              child: [
                {
                  title: 'menu item 6-1',
                  id: '',
                },
                {
                  title: 'menu item 6-2',
                  id: '',
                },
                {
                  title: 'menu item 6-3',
                  id: '',
                },
              ],
            },
          ],

          id: 'demo1',

          // 触发点击事件的元素范围 --- default: 仅子菜单触发点击事件（默认，可不填）; all: 所有父子菜单均触发点击事件
          clickScope: 'all',

          // 菜单被点击的事件
          click: (obj) => {
            console.log(obj);
          },
        });

        var inst = dropdown.render({
          elem: '#demo2',
          // ,show: true
          data: [
            {
              title: 'menu item 1',
              href: '#1',
              disabled: true,
            },
            {
              title: 'menu item 2(点击不关闭)',
              href: '#2',
              id: 'bbb',
            },
            {
              title: 'menu item 3',
              href: '#3',
            },
          ],
          click: (data, othis) => {
            console.log(data);
            if (data.id === 'bbb') {
              return false;
            }
          },
          ready: (...args) => {
            console.log(args);
          },
          close: function () {
            console.log('demo2', this.elem);
          },
        });

        dropdown.render({
          elem: '#demo3',
          content: '自定义内容  123 ',
          style: 'background:#666;color:#fff;padding:15px;',
          align: 'center',
          trigger: 'hover',
          close: function () {
            console.log('demo3', this.elem);
          },
        });

        // 右键
        dropdown.render({
          elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
          trigger: 'contextmenu', //contextmenu
          isAllowSpread: false,
          //,style: 'width: 200px'
          customName: {
            children: 'children',
          },
          data: [
            {
              title: 'menu item 1',
              id: '#1',
            },
            {
              title: 'menu item 2',
              id: 'reload',
            },
            { type: '-' },
            {
              title: 'menu item 3',
              id: '#3',
              children: [
                {
                  title: 'menu item 3-1',
                  id: '#1',
                },
                {
                  title: 'menu item 3-2',
                  id: '#2',
                },
                {
                  title: 'menu item 3-3',
                  id: '#3',
                },
              ],
            },
            { type: '-' },
            {
              title: 'menu item 4',
              id: '',
            },
            {
              title: 'menu item 5',
              id: '#1',
            },
            {
              title: 'menu item 6',
              id: '#1',
            },
          ],
          click: (obj, othis) => {
            if (obj.id === 'reload') {
              location.reload();
            }
          },
        });

        util.on({
          // 改变触发右键菜单的目标元素
          contextmenu: (othis) => {
            var ID = 'ID-dropdown-demo-contextmenu';
            if (!othis.data('open')) {
              dropdown.reload(ID, {
                elem: document, // 设置全局元素右键
              });

              othis.html('取消全局右键菜单');
              othis.data('open', true);
            } else {
              dropdown.reload(ID, {
                elem: '#' + ID, // 设置局部元素右键
              });

              othis.html('开启全局右键菜单');
              othis.data('open', false);
            }
          },
        });

        dropdown.render({
          elem: '#testopen',
          id: 'testopen',
          trigger: 'manual',
          data: [{ id: 'refresh', title: '刷新' }],
        });

        util.on(
          {
            open: () => {
              dropdown.open('testopen');
            },
            close: () => {
              dropdown.close('testopen');
            },
          },
          { trigger: 'mouseenter' },
        );

        return;

        dropdown.render({
          elem: document,
          content: '123',
        });
      });
    </script>
  </body>
</html>
